import React,{ useState, useEffect } from 'react'
import './Events.css'
import { useNavigate,useLocation } from 'react-router-dom'
import axios from 'axios'
import { NavBar, SearchBar, Toast, Space,Button } from 'antd-mobile'

export default function Events() {
    const navigate = useNavigate()
    const location = useLocation()
    const back = () =>
    {
        navigate(-1)
    }
    const [events,setEvents] = useState([])
    const getevent=()=>{
        axios.get('http://localhost:3000/getevent').then((res)=>{
            setEvents(res.data.data)
            console.log(res.data.data)
        })
    }
    const [city,setCity] = useState(location.state?location.state.adname:'南沙区')
    useEffect(()=>{
      getevent()
    },[])
  return (
    <div className='events'>
        <div className='events-top'>
        <NavBar left={<div className='events-left' onClick={()=>{navigate('/location')}}>{city}<img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%B4%BB%E5%8A%A8/u1087.svg'></img></div>} onBack={back} right={<div className='events-right'><img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%B4%BB%E5%8A%A8/u1090.svg'></img><p>收藏</p></div>}>
                        <SearchBar  onSearch={(e)=>{search(e)}} placeholder='寻找非遗活动' searchIcon={<img src="https://cdn8.axureshop.com/demo2024/2322481/images/%E9%A6%96%E9%A1%B5/u106.svg"></img>}
                         style={{
                                width: '99%',
                                '--height': '2.5rem',
                                '--border-radius': '2rem',
                            }}/>
                        </NavBar>
        </div>
        <div className='events-bottom'>
          {
            events.map((item,index)=>{
              return(
                <div className='events-bottom-item' key={index} onClick={()=>{
                  navigate('/eventsDetails',{state:item})
                }}
                  style={{
                    backgroundImage: `url(${item.img})`,
                  }}
                >
                  <div className='events-bottom-item-title'>
                    <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%B4%BB%E5%8A%A8/u1095.svg'></img>
                  </div>
                  <div className='events-bottom-item-text'>
                    <p>{item.name}</p>
                    <span>{item.desc}</span>
                  </div>
                  
                </div>
              )
            })
          }
        </div>
    </div>
  )
}
